<script setup lang="ts">
import store from "@/store";
import { computed } from "vue";
import { ModuleType } from "@/type";
import { COMPONENT_LIST, CUSTOM_GROUP } from "@/common";
import { updateNodeId } from "@/utils/tool";
import { ElMessage } from "element-plus";

const custom = "自定义组合组件";

// 自定义组合组件
const customGroup = computed(() => {
  return store.getters.customGroup || [];
});
// 组件列表
const componentList = computed(() => {
  for (const item of COMPONENT_LIST) {
    if (item.name === custom) {
      item.list = customGroup.value;
    }
  }
  return COMPONENT_LIST;
});

/**
 * 拖拽开始
 */
const dragstart = (component: ModuleType) => {
  // 设置拖拽组件
  store.commit("setDragComponent", updateNodeId(component));
};
/**
 * 拖拽结束
 */
const dragend = () => {
  // 清空拖拽组件
  store.commit("setDragComponent", {
    id: "",
    name: "",
    value: "",
    type: "",
    icon: "",
    layout: false,
    children: [],
    attribute: []
  });
};
/**
 * 删除自定义组合组件
 */
const deleteCustomGroup = (i: number) => {
  const list = customGroup.value;
  list.splice(i, 1);
  store.commit("setCustomGroup", list);
  localStorage.setItem(CUSTOM_GROUP, JSON.stringify(list));
  ElMessage.success("删除自定义组合成功");
};
</script>

<template>
  <div class="left-content">
    <div class="panel-title">
      <i class="fas fa-shapes color-secondary"></i>
      <span>组件库</span>
    </div>
    <div v-for="(item, i) in componentList" :key="i" class="component-category m-b-20">
      <div class="category-title f-s-14 color-7 font-weight m-b-10">{{ item.name }}</div>
      <div class="component-list">
        <div
          v-for="(items, j) in item.list"
          :key="j"
          class="component-item"
          draggable="true"
          @dragstart="dragstart(items)"
          @dragend="dragend"
        >
          <i :class="items.icon"></i>
          <span>{{ items.name }}</span>
          <i v-if="item.name === custom" class="fas fa-trash" @click="deleteCustomGroup(j)"></i>
        </div>
      </div>
    </div>
  </div>
</template>
